<template lang="pug">
.partitioninfo-wrap
  .partitioninfo-timebar
    ul
      li 分区：
        select(
          v-model="areaId"
          type='selet')
          option(
            v-for="(item,index) in areaList"
            v-text="item.area"
            :value="item.id")
          option(
            :value="false") 全部分区
      li
        span 时间：
        el-date-picker(
          v-model="timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:00:00")
      li.time-length
        span 间隔：
        select(v-model="interval")
          option(
            v-for="(item,index) in intervalList"
            :key="'interval'+index"
            :value="item.value") {{item.label}}
  .partitioninfo-top
    .waterio
      ChartWaterio(
        ref="chartWaterIO"
        :areaId="areaId"
        :timeRange="formatTimeRange"
        :interval="interval"
      )
    .indicators
      ChartIndicators(
        ref="chartIndicators"
        :areaId="areaId"
        :timeRange="formatTimeRange"
      )
  .partitioninfo-bottom
    TableNavbar(
      ref='tableNavbar'
      :areaId="areaId"
      :timeRange="formatTimeRange")
</template>

<script>
/**
 * @name PartionInfo 分区信息展示框
 * @author 王锐锋 <wangrf@gddxit.com>
 * @description 用于展示地图上的分区信息
 *参数：
 */
import ChartIndicators from '../Monitor/AreaMesg/ChartIndicators'
import ChartWaterio from '../Monitor/AreaMesg/ChartWaterio'
import TableNavbar from '../ZonalStatistic/TableNavbar'
export default {
  // prop: {
  //   areaId: Number
  // },
  components: {
    ChartWaterio,
    ChartIndicators,
    TableNavbar
  },
  data () {
    return {
      timeRange: [new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date()],
      areaList: [],
      areaId: null,
      activeDevice: '',
      interval: '',
      intervalList: [],
      formatTimeRange: [new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date()]
    }
  },
  methods: {
    getAreaRelation () {
      this.$get({
        url: '/dxbase/relation?relationList=pressureAreas'
      }).then(res => {
        if (this.$route.params.areaId) {
          this.areaId = this.$route.params.areaId
        } else this.areaId = res.pressureAreas[0].value
        this.areaList = res.pressureAreas.map(item => {
          return {
            area: item.label,
            id: item.value
          }
        })
      })
    },
    getDateTypeRelation () {
      this.$get({
        url: '/dxbase/relation?relationList=dateType'
      }).then(res => {
        this.intervalList = res.dateType
        this.interval = res.dateType[3].value
      })
    },
    changeTimeFormat (datetime) {
      var time = new Date(datetime)
      time.setSeconds(0)
      time.setMinutes(0)
      return time
    },
    // 格式化时间最小单位为小时
    getFormatTimeRange () {
      this.formatTimeRange = this.timeRange.map(item => this.changeTimeFormat(item))
      if (this.formatTimeRange[1].getTime() - this.formatTimeRange[0].getTime() < 60 * 60 * 1000) {
        this.formatTimeRange[1] = new Date(this.formatTimeRange[1].getTime() + 60 * 60 * 1000 - 1)
      }
    },
    // 请求页面所有数据
    refreshComponents () {
      this.getFormatTimeRange()
      this.$nextTick(() => {
        this.$refs.chartWaterIO.getData()
        this.$refs.chartIndicators.getData()
        this.$refs.tableNavbar.refreshTable()
      })
    }
  },
  watch: {
    areaId (val) {
      if (this.areaId) {
        this.refreshComponents()
      } else {
        this.$router.push({
          name: 'zonalStatistic',
          path: '/zonalStatistic'
        })
      }
    },
    timeRange () {
      if (this.areaId) {
        this.refreshComponents()
      }
    },
    interval () {
      if (this.areaId) {
        this.$nextTick(() => {
          this.$refs.chartWaterIO.getData()
        })
      }
    }
  },
  mounted () {
    this.getFormatTimeRange()
    this.changeTimeFormat(this.timeRange[0])
    this.getAreaRelation()
    this.getDateTypeRelation()
  }
}
</script>

<style lang="sass">
.partitioninfo-wrap
  background-color: #ebedef
  width: 100%
  min-width: 1000px
  height: 100%
  display: flex
  flex-direction: column
  padding: 10px
  .partitioninfo-timebar
    width: 100%
    height: 56px
    background-color: #fff
    padding-left: 30px
    padding: 8px 20px
    margin-bottom: 10px
    ul
      display: flex
      li
        margin-right: 20px
        /deep/.el-range-editor
          .el-range-input
            max-width: 160px
        select
          width: 120px
          height: 40px
          border: 1px solid #dfdfdf
          border-radius: 5px
          font-size: 15px
          padding-left: 10px
          color: #606266
  .partitioninfo-top
    width: 100%
    flex: 1
    display: flex
    justify-content: space-between
    overflow:hidden
    margin-bottom: 10px
    .waterio,.indicators
      float: left
    .waterio
      flex: 76
      margin-right: 10px
    .indicators
      flex: 24
  .partitioninfo-bottom
    width: 100%
    flex: 1
    display: flex
</style>
